<template>
    <div class="modifyPhone">
      <div class="top">
        <ul class="items-wrapper">
          <li class="item">
            <div class="left">现有手机号</div>
            <div class="right">189-5522-5544</div>
          </li>
          <li class="item">
            <div class="left">
              <input type="text" class="form-input" placeholder="请输入手机号">
            </div>
            <div class="right"><button class="getAuth isActive">获取验证码</button></div>
          </li>
          <li class="item">
            <div class="right">
              <input type="text" class="form-input" placeholder="请输入验证码">
            </div>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <button class="smt">保存修改</button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "modifyPhone"
    }
</script>

<style scoped lang="stylus">
  .modifyPhone
    background #f6f6f6
    height calc(100% - 64px)
    padding 10px
    .top
      background #ffffff
      border-radius 6px
      overflow hidden
      .items-wrapper
        .item
          height 44px
          line-height 44px
          display flex
          font-size 16px
          .left
            flex 1
            padding-left 10px
            text-align left
            color #737373
            .form-input
              height 100%
              width 100%
              outline none
              &::placeholder
                color #D2D2D2
          .right
            flex 0 0 120px
            padding-right 10px
            text-align right
            color #333333
            .form-input
              width 100%
              height 100%
              outline none
              padding-left 10px
              &::placeholder
                color #D2D2D2
            .getAuth
              width 90px
              height 30px
              border none
              border-radius 6px
              background #b7b7b7
              color #ffffff
              font-size 14px
              outline none
              &.isActive
                background #49A2FE
    .bottom
      padding-top 100px
      .smt
        width 100%
        height 44px
        border-radius 6px
        border none
        font-size 17px
        color #ffffff
        background #B7B7B7
        outline none
        &.isActive
          background #49A2FE
</style>
